<template>
  <div style="width: 80% ;margin:0 auto;min-width:921px;">
    <h2 class="margin-bom title">{{title}}</h2>
    <el-button style="display:block" type="primary" @click="toCreate()" v-if="type != 2">新建</el-button>
    <el-table :data="devices" :row-class-name="tableRowClassName">
      <el-table-column type="index" label="序号" width="150"></el-table-column>
      <el-table-column prop="ip" label="ip"></el-table-column>
      <el-table-column prop="door" label="机房"></el-table-column>
      <el-table-column prop="num" label="编号"></el-table-column>
      <el-table-column prop="width" label="宽带"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">{{scope.row.status == '0'?'空闲':'已出售'}}</template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" @click="updateDevice(scope.row.id)" v-if="type != 2">查看</el-button>
          <el-button
            type="success"
            @click="buyDevice(scope.row.id)"
            v-if="type == '2'"
            :disabled="scope.row.status == '1'"
          >购买</el-button>
          <v-del :delId="scope.row.id" @del="del($event)" v-if="type != 2"></v-del>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import API from "../../common/js/api";
import ajax from "../../common/js/ajax";
export default {
  data() {
    return {
      title: "设备管理",
      devices: [],
      // 权限
      type: ""
    };
  },
  methods: {
    toCreate() {
      this.$router.push("/index/device/deviceCreate");
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.status == "0") {
        return "success-row";
      } else {
        return "warning-row";
      }
    },
    del(id) {
      ajax(
        API.delDevice,
        "get",
        { id },
        d => {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.init();
        },
        err => {
          this.$message({
            type: "warning",
            message: err.data.info
          });
        }
      );
    },
    updateDevice(id) {
      this.$router.push("/index/device/deviceCreate?id=" + id);
    },
    buyDevice(id) {
      // 用户购买
      this.$confirm("是否购买此设备", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          ajax(
            API.updateDevice,
            "get",
            { id: id, status: '1'},
            d => {
              this.$message({
                type: "success",
                message: "购买成功"
              });
              this.init()
            },
            err => {
              this.$message({
                type: "warning",
                message: err.data.info
              });
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已经取消购买"
          });
        });
    },
    init() {
      ajax(
        API.findDevice,
        "get",
        {},
        d => {
          this.devices = d.data.data;
        },
        err => {
          alert(err.data.info);
        }
      );
    }
  },
  mounted() {
    this.type = JSON.parse(localStorage.getItem("user")).type;
    this.init();
  }
};
</script>

<style scoped lang="stylus">
@import '../../common/css/index.styl';

.el-table >>> .warning-row {
  background: oldlace;
}

.el-table >>> .success-row {
  background: #f0f9eb;
}
</style>